<template>
	<view class="page-root-bg">
		<!-- <view style="padding-top: 200rpx;display: flex;justify-content: space-evenly;">
			<view>
				<image src="/static/img/danghui.png" style="width: 106rpx;height: 113rpx;"></image>
			</view>
			<view>
				<image src="/static/img/guohui.png" style="width: 106rpx;height: 113rpx;"></image>
			</view>
			<view>
				<image src="/static/img/zhengxiehui.png" style="width: 106rpx;height: 113rpx;"></image>
			</view>
		</view> -->
		<view style="display: flex;justify-content: center;">
			<image src="/static/img/login-title.png" style="width: 500rpx;" mode="aspectFit"></image>
		</view>

		<view class="login-box">
			<view class="form">
				<uni-forms label-position="left">
					<uni-forms-item label="手机号" name="phone" required>
						<uni-easyinput type="text" placeholder="请输入手机号码" v-model="phone" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code" required>
						<view style="display: flex;">
							<uni-easyinput type="number" placeholder="请输入验证码" v-model="code" />
							<button type="button" class="codeBtn" @click="getCode">{{codeName}}</button>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="footer">
				<button type="button" @click="loginClick">登录</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				clock: '',
				countdown: 120,
				codeName: '获取验证码',
				code: '1234',
				phone: '13039509698'
			}
		},
		onLoad() {

		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			getCode() {
				this.$api.login.getLoginSmsCode({
					phone: this.phone,
				}).then((res) => {
					console.log(res, '#######################');
				})

				this.codeName = this.countdown + 's';
				this.clock = setInterval(this.doLoop, 1000); //一秒执行一次
			},
			loginClick() {
				this.$api.login.phoneNoLogin({
					phone: this.phone,
					smsCode: this.code
				}).then((res) => {
					if (res.code == 200) {
						uni.setStorageSync('newToken', res.result.token)
						this.$jump.toJump('/pages/home/index')
					} else {
						this.$modal.toast(res.message)
					}
				})
			},
			doLoop() {
				this.countdown--;
				if (this.countdown > 0) {
					this.codeName = this.countdown + 's';
				} else {
					clearInterval(this.clock);
					this.codeName = '获取验证码';
					this.countdown = 120; //重置时间
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-root-bg {
		width: 100vw;
		height: 100vh;
		background: url('@/static/img/login-bg.png');
		background-size: 100% 100%;
	}

	.login-box {
		margin: 30rpx;
		background-color: $bg-color-white;
		border-radius: $border-radius-lg;
		padding: 30rpx 0;

		.form {
			width: 100%;
			padding: 30rpx;

			.uni-forms-item {
				margin-bottom: 10rpx !important;
			}
		}

		.codeBtn {
			height: 80rpx;
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #FFFFFF !important;
			background: #ad2325 !important;
		}

		.footer {
			height: 120rpx;
			padding: 10rpx 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background-color: #FFFFFF;
			// z-index: 10;
			// box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

			button {
				width: 100%;
				height: 80%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				color: #FFFFFF !important;
				background: #ad2325 !important;
			}
		}
	}

	::v-deep .is-input-border {
		border: 0 solid #dcdfe6;
		border-bottom: 1px solid #dcdfe6;
		border-radius: 0px;
	}
</style>